<template>
	<view class="license">
		<view class="license-bg">
			<text>请确认证件信息</text>
			<text>请验证您的证件信息，通过后将不能修改</text>
		</view>

		<view class="license-form">
			<u--form labelPosition="left" :model="model" :rules="rules" ref="uForm" :labelWidth="200">
				<u-form-item label="所有人" prop="owner" borderBottom required>
					<u--input v-model="model.owner" border="none" inputAlign="right"></u--input>
				</u-form-item>
				<u-form-item label="车牌号码" prop="plateNo" borderBottom required>
					<u--input v-model="model.plateNo" border="none" inputAlign="right"></u--input>
				</u-form-item>
				<u-form-item label="VIN码" prop="vin" borderBottom required>
					<u--input v-model="model.vin" border="none" inputAlign="right"></u--input>
				</u-form-item>
			</u--form>
		</view>

		<view class="license-button">
			<u-button text="认证" color="#CF1A1B" @click="handleSubmit"></u-button>
		</view>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				model: {
					owner: '',
					plateNo: '',
					vin: ''
				},
				rules: {
					'owner': {
						type: 'string',
						required: true,
						message: '请填写所有人'
					},
					'plateNo': {
						type: 'string',
						required: true,
						message: '请填写车牌号码'
					},
					'vin': {
						type: 'string',
						required: true,
						message: '请填写VIN码'
					},
				},
				licenseInfo: {}
			};
		},
		onLoad(option) {
			this.licenseInfo = JSON.parse(option.info)
			this.model.owner = this.licenseInfo.owner
			this.model.plateNo = this.licenseInfo.plateNo
			this.model.vin = this.licenseInfo.vin
		},
		methods: {
			...mapActions('user', ['getUserInfoFn']),
			handleSubmit() {
				this.$refs.uForm.validate().then(async res => {
					try {
						let url = ''
						let userInfo = uni.getStorageSync('userInfo') || {}
						let state = !!userInfo.userCarInfo
						if (state) { //已认证
							url = '/terminal-serve-center/merchant-car/reapproval'
						} else {
							url = '/terminal-serve-center/merchant-car/approval'
						}
						const res1 = await this.$request({
							method: 'POST',
							url: url,
							data: {
								carPic: this.licenseInfo.carUrl,
								address: this.licenseInfo.address,
								engineNo: this.licenseInfo.engineNo,
								issueDate: this.licenseInfo.issueDate,
								model: this.licenseInfo.model,
								owner: this.model.owner,
								plateNo: this.model.plateNo,
								registerDate: this.licenseInfo.registerDate,
								useCharacter: this.licenseInfo.useCharacter,
								veLicenceFront: this.licenseInfo.licenseUrl,
								veLicenceOwner: this.model.owner,
								vehicleType: this.licenseInfo.vehicleType,
								vin: this.model.vin
							}
						})

						this.$refs.uToast.show({
							message: '提交成功，卡友之家将在7个工作日内为您审核',
							type: 'default'
						})
						await this.getUserInfoFn()
						
						try{
							this.$uma.trackEvent('car-approval');
							this.autoReport({
								pageName: '车辆认证页',
								eventCode: 'car-approval',
								businessId: res1.datas.carId
							})
						}catch(e){
						}
						if (res1.datas && !res1.datas.matchModelResult) {
							setTimeout(() => {
								uni.navigateTo({
									url: `/indexPack/car/brand?flag=${true}`
								});
							}, 2000)
						} else {
							let source = uni.getStorageSync('authSource')
							if (source === 'mine') { // 我的
								uni.switchTab({
									url: '/pages/mine/home'
								})
							} else if (source === 'personalAuth') { // 我的认证
								// uni.navigateBack({
								// 	delta: 2
								// })
								uni.navigateTo({
									url: `/minePack/user/personalInformation/index`
								})
							} else {
								uni.switchTab({
									url: '/pages/index/index/index'
								})
							}
							uni.$emit('refreshData')
							uni.$emit('refreshIndex')
						}


					} catch (e) {
						this.$refs.uToast.show({
							message: e.respMsg || '认证失败',
							type: 'error'
						})
					}
				}).catch(errors => {})
			}
		}
	}
</script>

<style lang="scss">
	.license {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		box-sizing: border-box;

		&-bg {
			height: 115px;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: linear-gradient(135deg, #F55932 0%, #CF1A1B 100%);

			text {
				&:first-child {
					font-size: 56rpx;
					color: #FFFFFF;
					margin-bottom: 10px;
				}

				&:last-child {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.65);
				}
			}
		}

		&-form {
			margin: 0 32rpx;
		}

		&-button {
			height: 70px;
			width: 100%;
			z-index: 99;
			position: absolute;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #FFFFFF;

			/deep/ .u-button {
				width: 90% !important;
			}
		}
	}
</style>